<template>
  <view class="person">
    <view class="person-des-wrap">
      <view
        class="person-des-info"
        v-for="(item, index) in personList"
        :key="index"
        @tap="jumpHandler(item)"
      >
        <text>{{ item.nameNick }}：{{ item.describe }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      personList: [
        {
          id: 1,
          nameNick: "任北游",
          describe: "乌木县丞--青袍男子",
        },
        {
          id: 2,
          nameNick: "燕三思",
          describe: "头戴木簪男子--面覆的小兵",
        },
        {
          id: 3,
          nameNick: "伍云涛",
          describe: "魁梧男子--白户长",
        },
        {
          id: 4,
          nameNick: "洛十安",
          describe: "紫衣少女--紫衣少女",
        },
        {
          id: 5,
          nameNick: "望西东",
          describe: "红袍银甲女子--商贾打扮女子",
        },
        {
          id: 6,
          nameNick: "张出尘",
          describe: "黑衣女子--追风楼老板娘",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    jumpHandler(val) {
      this.$Router.push({
        name: "conversation",
        query: {
          id: val.id,
          describe: val.describe,
          nameNick: val.nameNick,
        },
      });
    },
  },
};
</script>

<style>
page {
  background-color: #2f3542;
}
</style>
<style lang="scss">
.person {
  margin-top: 20rpx;
  .person-des-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    .person-des-info {
      background: #ffffff;
      font-size: 36rpx;
      color: #333333;
      padding: 34rpx 30rpx;
      margin: 56rpx 0;
      width: 80%;
      border-radius: 10rpx;
      font-weight: 600;
    }
  }
}
</style>
